import React, { Component } from "react";
import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from "@ant-design/icons";
import {
  LoginForm,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from "@ant-design/pro-components";
import { message, Space, Tabs, Spin } from "antd";
import { connect } from "react-redux";
import { login_centre, login_asyn } from "../store/action/index";

const iconStyles = {
  marginInlineStart: "16px",
  color: "rgba(0, 0, 0, 0.2)",
  fontSize: "24px",
  verticalAlign: "middle",
  cursor: "pointer",
};
const items = [
  {
    key: "account",
    label: `账号密码登录`,
  },
  {
    key: "phone",
    label: `手机登录`,
  },
];
class Login extends Component {
  state = {
    loginType: "account",
  };
  handleClick = (v) => {
    this.setState({
      loginType: v,
    });
  };
  onFinish = (info) => {
    this.props.login_asyn(info, this.props.history);
    console.log(this.props);
  };
  render() {
    console.log(this.props.user);
    const { user, login_centre } = this.props;
    const { loginType } = this.state;
    return (
      <Spin size="large" spinning={user.login_centre}>
        <ProConfigProvider hashed={false}>
          <div style={{ backgroundColor: "white" }}>
            <LoginForm
              logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
              title="公司大名"
              subTitle="全球最大的代码托管平台"
              onFinish={this.onFinish}
              actions={
                <Space>
                  其他登录方式
                  <AlipayCircleOutlined style={iconStyles} />
                  <TaobaoCircleOutlined style={iconStyles} />
                  <WeiboCircleOutlined style={iconStyles} />
                </Space>
              }
            >
              <Tabs
                centered
                items={items}
                activeKey={loginType}
                onTabClick={this.handleClick}
              />
              {loginType === "account" && (
                <>
                  <ProFormText
                    name="username"
                    fieldProps={{
                      size: "large",
                      prefix: <UserOutlined className={"prefixIcon"} />,
                    }}
                    placeholder={"用户名"}
                    rules={[
                      {
                        required: true,
                        message: "请输入用户名!",
                      },
                    ]}
                  />
                  <ProFormText.Password
                    name="password"
                    fieldProps={{
                      size: "large",
                      prefix: <LockOutlined className={"prefixIcon"} />,
                    }}
                    placeholder={"密码"}
                    rules={[
                      {
                        required: true,
                        message: "请输入密码！",
                      },
                    ]}
                  />
                </>
              )}
              {loginType === "phone" && (
                <>
                  <ProFormText
                    fieldProps={{
                      size: "large",
                      prefix: <MobileOutlined className={"prefixIcon"} />,
                    }}
                    name="mobile"
                    placeholder={"手机号"}
                    rules={[
                      {
                        required: true,
                        message: "请输入手机号！",
                      },
                      {
                        pattern: /^1\d{10}$/,
                        message: "手机号格式错误！",
                      },
                    ]}
                  />
                  <ProFormCaptcha
                    fieldProps={{
                      size: "large",
                      prefix: <LockOutlined className={"prefixIcon"} />,
                    }}
                    captchaProps={{
                      size: "large",
                    }}
                    placeholder={"请输入验证码"}
                    captchaTextRender={(timing, count) => {
                      if (timing) {
                        return `${count} ${"获取验证码"}`;
                      }
                      return "获取验证码";
                    }}
                    name="captcha"
                    rules={[
                      {
                        required: true,
                        message: "请输入验证码！",
                      },
                    ]}
                    onGetCaptcha={async () => {
                      message.success("获取验证码成功！验证码为：1234");
                    }}
                  />
                </>
              )}
              <div
                style={{
                  marginBlockEnd: 24,
                }}
              >
                <ProFormCheckbox noStyle name="autoLogin">
                  自动登录
                </ProFormCheckbox>
                <a
                  style={{
                    float: "right",
                  }}
                >
                  忘记密码
                </a>
              </div>
            </LoginForm>
          </div>
        </ProConfigProvider>
      </Spin>
    );
  }
}
export default connect(({ user }) => ({ user }), { login_centre, login_asyn })(
  Login
);
